<template>
  <div class="top-bar">
    <div class="left">
      <span class="iconfont icon-live"></span>
    </div>
    <div class="middle">
      <div class="item" @click="changeTop(0)"><span :class="topIndex == 0 ? 'active' : ''">同城</span></div>
      <div class="item" @click="changeTop(1)"><span :class="topIndex == 1 ? 'active' : ''">关注</span></div>
      <div class="item" @click="changeTop(2)"><span :class="topIndex == 2 ? 'active' : ''">推荐</span></div>
    </div>
    <div class="right">
      <span class="iconfont icon-sousuo"></span>
    </div>
  </div>
</template>
<script>
export default {
  name:'TopBar',
  data(){
    return{
      topIndex:0
    }
  },
  methods:{
    changeTop(index){
      this.topIndex=index
    }
  }
}
</script>
<style scoped>
  .top-bar{
    z-index: 9999;
    position: fixed;
    width: 100%;
    height: 60px;
    font-size: 18px;
    color: #ccc;
    padding: 20px;
    display: flex;
    box-sizing: border-box;
  }
  .left, .right{
    width: 20%;
  }
  .iconfont{
    font-size: 24px;
  }
  .middle{
    width: 60%;
    display: flex;
    justify-items: center;
  }
  .item{
    flex: 1;
    text-align: center;
  }
  .right{
    text-align: right;
  }
  .active{
    color: #fff;
    border-bottom: 3px solid #fff;
  }
</style>